<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
</body>
<script>
    // var a,b,c;
    // function sum(a,b){ // 形参
    //     return a + b;
    // }


   /* 
    JS代码从加载到执行经过了哪些流程?
    1. 语法解析 => 发生在代码执行之前,通篇排查脚本中是否存在语法错误(SyntaxError),如果有错,脚本将不会执行
    2. 预编译(预解析)  => 发生在代码执行之前,代码执行之前的准备工作
     (1) 脚本执行之前的预编译 (全局作用域)
        a.  变量提升   => 把(全局)变量声明提升到当前作用域最前面(当前脚本的最前面)
        b.  确定函数体(函数体提升  => 把(命名)函数的整个函数声明提前) 

     (2) 函数执行之前的预编译 ()
        a.  变量提升   => 把(局部)变量声明提升到当前作用域最前面(当前函数作用域的最前面)
        b.  确定函数体(函数体提升  => 把(命名)函数的整个函数声明提前)   
        c.  把实际参数赋值给形式参数 => 形参和实参一一对应

    3. 解释执行  => 代码自上而下依次执行
   
    // 注意: 不通过关键词直接声明的变量,也是全局变量, 缺点: 没有变量提升 
   
   */
    
    //  脚本执行之前的预编译
    console.log(a,b,c);
    console.log(sum);

    var result = sum(100,200);  // 实际参数
    console.log(result);

    var a = 10;
    var b = 20;
    var c = a + b;

    function sum(a,b){ // 形参
        return a + b;
    }

    // var sum = function(a,b){
    //     return a + b;
    // }




    // 函数执行之前的预编译   => 发生在函数执行之前, 是函数执行之前的准备工作


    function fn(a,b){
        // var x,y;
        // function sum(a,b){
        //     return a + b;
        // }
        // a = 100, b = 200;

        console.log(x,y);
        console.log(sum);
        console.log(a,b);

        var x = 10;
        var y = 20;

        function sum(a,b){
            return a + b;
        }

    }

    fn(100,200);



</script>
</html>